
import { useRef } from "react";
import { ModalForm, ProFormText, ProFormTextArea } from "@ant-design/pro-form";
import type { FormInstance } from "antd";
import { TableListItem } from "../data.d"
import { typeLabel } from "@/untils/label"

type ModelDataType = {
    isModalVisible: boolean;
    title: string;
    onCancel: () => void;
    rowData: TableListItem;
}
export default (props: ModelDataType) => {
    const { title, isModalVisible, onCancel, rowData } = props
    const formRef = useRef<FormInstance>();
    const disabled = title === "show" ? true : false
    const onVisibleChange = () => {
        if (rowData?.name && title === "edit" || title === "show") {
            const { name, containers, status } = rowData
            formRef?.current?.setFieldsValue({
                name,
                containers,
                status
            })
        } else if (title === "add") {
            formRef?.current?.resetFields()
        }
    }
    return <>
        <ModalForm
            title={typeLabel.get(title)}
            formRef={formRef}
            visible={isModalVisible}
            modalProps={{
                onCancel,
            }}
            onVisibleChange={onVisibleChange}
            onFinish={async () => {
                return true
            }}
        >
            <ProFormText
                name="name"
                label="类别名称"
                placeholder="请输入名称"
                rules={[
                    { required: true }
                ]}
                disabled={disabled}
            />
            <ProFormText
                name="containers"
                label="排序"
                placeholder="请输入名称"
                disabled={disabled}
            />
            <ProFormTextArea
                name="status"
                label="备注"
                placeholder="请输入名称"
                disabled={disabled}
            />

        </ModalForm>
    </>
}